<!--
 * @description: 
 * @Author: vikingShip
 * @Date: 2021-11-04 14:20:04
 * @LastEditors: vikingShip
 * @LastEditTime: 2022-01-21 10:35:05
-->
<template>
  <view>
    <u-popup :show="showType" mode="bottom" @close="onClose">
      <view class="border" style="height:700upx;">
        <view class="border__title">店铺优惠</view>
        <view style="background-color:#F0F0F0;height:8rpx;"></view>
        <view style="height:85%;overflow-y:auto">
          <view v-for="(coupon, index) in list" :key="index">
            <coupon :coupon="coupon" state="noUse" @myCouponGet="myCouponGet"></coupon>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script lang='ts'>
  import {
    Component,
    Vue,
    Prop
  } from 'vue-property-decorator'
  import coupon from "@/components/couponCom/coupon/coupon.vue"
  import selectNorms from "@/components/select-norms/selectNorms.vue"

  @Component({
    components: {
      coupon,
      selectNorms
    }
  })
  export default class Pop extends Vue {
    @Prop()
    showType: boolean
    @Prop()
    couponList: Array < any > = []

    get list() {
      return [].slice.call(this.couponList)
    }

    onClose() {
      this.$store.commit('settingStore/setTabVisible', true);
      this.$emit("close",false)
      // const parent:fatherType = this.$parent
      // parent.showType = false
      // this.showType=false
      // this.$parent.showType=false
    }

    myCouponGet(e) {
      this.$emit("myCouponGet", e);
    }
  }
</script>
<style lang="scss" scoped>
  .border {
    background: white;

    &__title {
      background-color: white;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
    }
  }

  .coupon {
    color: black;
    display: flex;
  }
</style>